<template>
	<view class="cardStrategy">
		<n-loading></n-loading>
		<top-bar :bgColor="bgColor" :type="topTabType" fontColor="#FFF" transparentFixedFontColor="#FFF" title="会员攻略"></top-bar>
		<image class="cardStrategyBj" src="https://lovebirdopen.com/static/img/cBj/memberStrategyBj.png" mode=""></image>
		<!-- 入驻九仙御贡会员卡 -->
		<view class="cardExplain">
			<view class="cardExplainTitBox">
				<view class="cardExplainTit">入驻九仙御贡会员卡</view>
			</view>
			<u-parse :html="settleIn" class="explainCont"></u-parse>
			<image class="bot" src="https://lovebirdopen.com/static/img/cBj/Intersect.png" mode=""></image>
		</view>
		<!-- 会员卡升级等级及标准 -->
		<view class="cardExplain">
			<view class="cardExplainTitBox">
				<view class="cardExplainTit">会员卡升级等级及标准</view>
			</view>
			<view class="comTit mb16">会员标准</view>
			<view class="tableBox" v-if="standard">
				<view class="tableTr">
					<view class="tableTh1" style="width: 140rpx;">会员</view>
					<view class="tableTh1">等级</view>
					<view class="tableTh">经验值</view>
				</view>
				<view class="tableTr" v-for="(item,index) of standard" :key="index" :style="index==(standard.length-1)?'border-bottom:none;':''">
					<view class="tableTdL">{{item.name}}</view>
					<view class="tableTdR">
						<view class="tableTdRBox" v-for="(val,i) of item.list" :key="i" :style="i==item.list.length-1?'border-bottom: none;':''">
							<view class="tableTd1">{{val.title}}</view>
							<view class="tableTd" style="border-right: none;">{{val.val+'-'+val.next_integral}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="comTit mb16">特殊铭牌</view>
			<view class="tableBox mb32" v-if="nameplate">
				<view class="tableTr">
					<view class="tableTh1" style="width: 140rpx;">名称</view>
					<view class="tableTh">权益</view>
				</view>
				<view class="tableTr" v-for="(item,index) of nameplate" :key="index" :style="index==(nameplate.length-1)?'border-bottom:none;':''">
					<view class="tableTdL">{{item.title}}</view>
					<view class="tableTdR">
						<view class="tableTdRBox" style="border-bottom: none;">
							<view class="tableTd" style="border-right: none;">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 注意事项 -->
			<view class="attention">
				<view class="tit"><text>*</text>团队补贴注意事项：</view>
				<u-parse :html="attention" class="cont"></u-parse>
			</view>
			
			<image class="bot" src="https://lovebirdopen.com/static/img/cBj/Intersect.png" mode=""></image>
		</view>
		<!-- 经验值获取方式 -->
		<view class="cardExplain">
			<view class="cardExplainTitBox">
				<view class="cardExplainTit">经验值获取方式</view>
			</view>
			<view class="explainCont2">
				<image class="imageCont" src="https://lovebirdopen.com/static/img/grade/howObtain.png" mode=""></image>
				<u-parse :html="getValue" class="cont"></u-parse>
			</view>
			<image class="bot" src="https://lovebirdopen.com/static/img/cBj/Intersect.png" mode=""></image>
		</view>
		<!-- 团队补贴攻略 -->
		<view class="cardExplain">
			<view class="cardExplainTitBox">
				<view class="cardExplainTit">团队补贴攻略</view>
			</view>
			<u-parse :html="teamSubsidy" class="explainCont"></u-parse>
			<image class="bot" src="https://lovebirdopen.com/static/img/cBj/Intersect.png" mode=""></image>
		</view>
		<!-- 存酒与高粱穗 -->
		<view class="cardExplain mb0">
			<view class="cardExplainTitBox">
				<view class="cardExplainTit">存酒与高粱穗</view>
			</view>
			<view class="explainCont">
				<u-parse :html="storeWine" class="explainCont"></u-parse>
				<view class="sWineRules">
					<u-icon name="question-circle" color="#999" size="23"></u-icon>
					存酒规则
				</view>
			</view>
			<view class="comTit mb24">收益比例</view>
			<u-parse :html="incomeRatio" class="explainCont"></u-parse>
			<image class="bot" src="https://lovebirdopen.com/static/img/cBj/Intersect.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topTabType:'transparentFixed',
				// fontColor:'#fff',
				bgColor:'',
				// 入驻九仙御贡会员卡
				settleIn:null,
				// 会员卡升级等级及标准
				standard:null,
				nameplate:null,
				attention:null,
				// 经验值获取方式
				getValue:null,
				// 团队补贴攻略
				teamSubsidy:null,
				// 存酒与高粱穗
				storeWine:null,
				// 收益比例
				incomeRatio:null,
			}
		},
		onLoad: function (option) {
			this.getStrategy();
		},
		onPageScroll(e) {
			if(e.scrollTop>50){
				this.topTabType = 'fixed';
				this.bgColor = '#FD8E57';
			}
			if(e.scrollTop < 50){
				this.topTabType = 'transparentFixed';
				this.bgColor = '';
			}
		},
		methods: {
			getStrategy(){
				this.apiget('/fun/member/vip-level',{}).then(res =>{
					if(res.data.status == 200 ) {
						this.settleIn = res.data.data.description.MALL_DESCRIPTION_VIP_CARD.val;
						this.standard = res.data.data.vip;
						this.nameplate = res.data.data.svip;
						this.attention = res.data.data.description.MALL_DESCRIPTION_SPECIAL_NAMEPLATE.val
						this.getValue = res.data.data.description.MALL_DESCRIPTION_VIP_EXPERIENCE.val;
						this.teamSubsidy = res.data.data.description.MALL_DESCRIPTION_TEAM_SUBSIDY.val;
						this.storeWine = res.data.data.description.MALL_DESCRIPTION_STORAGE_WINE.val;
						this.incomeRatio = res.data.data.description.MALL_DESCRIPTION_INCOME_RATIO.val;
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.cardStrategy{
		width: 100%;
		min-height: 100%;
		padding: 812rpx 40rpx 64rpx;
		background: #FD8E57;
		
		.cardStrategyBj{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 1058rpx;
		}
		
		.cardExplain{
			position: relative;
			z-index: 1;
			padding: 84rpx 32rpx 90rpx;
			margin-bottom: 68rpx;
			background-color: #fff;
			border-radius: 16rpx;
			
			.cardExplainTitBox{
				position: absolute;
				top: -36rpx;
				left: 50%;
				width: 100%;
				height: 72rpx;
				margin-left: -50%;
				text-align: center;
				
				.cardExplainTit{
					display: inline-block;
					height: 72rpx;
					padding: 0 64rpx;
					font-size: 32rpx;
					line-height: 72rpx;
					color: #FFFFFF;
					text-align: center;
					background: linear-gradient(99.66deg, #FF6C56 26.36%, #FF5238 55.66%);
					border: 2rpx solid #FFFFFF;
					border-radius: 70rpx;
					box-shadow: 0px 4rpx 8rpx rgba(192, 25, 0, 0.2), inset 0px 2rpx 10rpx rgba(198, 0, 0, 0.25);
				}
			}
			
			.explainCont{
				position: relative;
				z-index: 1;
				font-size: 28rpx;
				line-height: 44rpx;
				color: #333333;
				
				.sWineRules{
					position: absolute;
					right: 0;
					bottom: 0;
					text-align: right;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #999999;
					
					.u-icon{
						margin-right: 10rpx;
					}
				}
			}
			.explainCont2{
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				
				.imageCont{
					width: 240rpx;
					height: 262rpx;
					margin-right: 54rpx;
				}
				.cont{
					flex: 1;
					width: 1px;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #333333;
				}
			}
			
			.comTit{
				position: relative;
				z-index: 1;
				padding: 32rpx 0 10rpx;
				font-weight: 900;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #FF5238;
				text-align: center;
				border-bottom: 2rpx solid #E8E8E8;
			}
			.comTit:after{
				position: absolute;
				content: '';
				bottom: 0;
				left: 50%;
				width: 128rpx;
				height: 6rpx;
				margin-left: -64rpx;
				background-color: #FF5238;
			}
			
			.bot{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 116rpx;
			}
		}
		
		.mb0{
			margin-bottom: 0;
		}
		.pb38{
			padding-bottom: 38rpx;
		}
		.mb24{
			margin-bottom: 24rpx;
		}
		.mb16{
			margin-bottom: 16rpx;
		}
		
	}
	.tableBox{
		position: relative;
		z-index: 1;
		border: 2rpx solid #FFE2DE;
		.tableTr{
			display: flex;
			font-size: 24rpx;
			align-items: center;
			border-bottom: 2rpx solid #FFE2DE;
			
			.tableTh1{
				width: 168rpx;
				padding-left: 32rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: #FFE2DE;
				box-sizing: border-box;
				color: #333;
			}
			.tableTh{
				flex: 1;
				height: 64rpx;
				line-height: 64rpx;
				background: #FFE2DE;
				padding-left: 32rpx;
				color: #333;
			}
			.tableTdL{
				width: 140rpx;
				height: 100%;
				color: #666;
				text-align: center;
			}
			.tableTdR{
				flex: 1;
				color: #666;
				border-left: 2rpx solid #FFE2DE;
				
				.tableTdRBox{
					display: flex;
					border-bottom: 2rpx solid #FFE2DE;
					
					.tableTd1{
						width: 190rpx;
						padding-left: 32rpx;
						line-height: 64rpx;
						border-right: 2rpx solid #FFE2DE;
					}
					.tableTd{
						flex: 1;
						height: 64rpx;
						padding-left: 32rpx;
						line-height: 64rpx;
						border-right: 2rpx solid #FFE2DE;
					}
				}
			}
			
		}
		
		.bbn{
			border-bottom: none;
		}
		.brn{
			border-right: none;
		}
	}
	.attention{
		font-size: 24rpx;
		line-height: 40rpx;
		color: #999999;
		
		.tit{
			text{
				margin-right: 8rpx;
				color: #FF5238;
			}
		}
		.cont{
			padding-left: 22rpx;
			margin-top: 8rpx;
		}
	}
	.mb32{
		margin-bottom: 32rpx;
	}
</style>
